<template>
	<view>
		<view class="box">

			<!-- 头部 -->
			<publicHeader></publicHeader>

			<view class="page_main">

				<view class="pt32 pb32 pl30 pr30">
					<view class="swiper_box">
						<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
							<swiper-item>
								<view class="swiper-item">
									<image src="../../static/h5_banner_01.png" class="swiper_img"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">
									<image src="../../static/h5_banner_01.png" class="swiper_img"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">
									<image src="../../static/h5_banner_01.png" class="swiper_img"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="mt45 fs32 lh40 fwb cor_000 tac">Exhibitor List</view>
					<view class="mt32 df aic jcsb">
						<view class="on ex_tags_1">SEND LIST TO MYSELF</view>
						<view class="on ex_tags_1">CLEAR MY LIST</view>
					</view>
				</view>

				<view class="re">
					<view class="content_box">
						<view class="sw_page_list">
							<view class="item_sw">EXHIBITORS</view>
							<view class="on item_sw">PRODUCTS</view>
						</view>

						<view class="re">

							<view class="mt32" v-for="(item, index) in cardListData" :key="item.id">
								<view class="fs28 lh36 fwb cor_000">AWE HALL 10</view>
								<view class="mt10 fs24 lh32 cor_000">1 Exhibitor are added to MyList from Hall 10</view>
								<view class="mt24 ex_card_box">
									<view class="flex_box">
										<view class="re mr20">
											<view class="card_img">
												<image src="../../static/h5_banner_01.png" class="img_size"
													mode="aspectFit"></image>
											</view>
										</view>
										<view class="item ov">
											<view class="pr25">
												<view class="fs28 lh36 fwb cor_000">A GRADE PACIFIC LIMITED</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_000"><text class="fwb">Country/Region :
														</text><text class="">CHINA</text></view>
												</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_A90"><text class="fwb">BOOTH NO. :
														</text><text class="">10-N20</text></view>
												</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_000"><text class="fwb">PRODUCT(S)
															ADDED:</text><text class=""></text></view>
												</view>
												<view class="pt15 pb15 bb5">
													<view class="fs24 lh32 cor_000"><text class="fwb">CATEGORIES
															: </text><text class=""> Skincare Products, Personal Care
															Products,Makeup Products</text></view>
												</view>
											</view>
										</view>
									</view>
									<image
										:src=" item.checked ? '../../static/icon_checkbox_2.png' : '../../static/icon_checkbox_1.png'"
										class="card_checkbox_pos" @click="handleCheckbox(item.id);"></image>
								</view>
							</view>

						</view>

					</view>
					<image src="../../static/ic_bg_1.png" class="page_bg_pos_1"></image>
				</view>

			</view>

			<!-- footer -->
			<publicFooter></publicFooter>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardListData: [{
						id: 0,
						checked: false
					},
					{
						id: 1,
						checked: false
					},
					{
						id: 2,
						checked: false
					},
					{
						id: 3,
						checked: false
					},
					{
						id: 4,
						checked: false
					},
				]
			}
		},
		methods: {

			handleCheckbox(index) {
				this.cardListData = this.cardListData.map(item => {
					if (item.id === index) {
						item.checked = !item.checked;
						return item
					} else {
						return item
					}
				});
			}

		}
	}
</script>

<style>
	.swiper_box {
		position: relative;
		width: 100%;
		height: 184rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiper_box .swiper_img {
		position: relative;
		width: 100%;
		height: 184rpx;
	}

	.ex_tags_1 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 330rpx;
		height: 76rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		font-weight: bold;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
	}

	.on.ex_tags_1 {
		color: #fff;
		background: #A90000;
		border-color: #A90000;
	}

	.page_bg_pos_1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
		z-index: 1;
	}

	.content_box {
		position: relative;
		padding: 32rpx 30rpx;
		z-index: 2;
	}

	.sw_page_list {
		position: relative;
		display: flex;
		width: 462rpx;
		height: 60rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 8rpx;
	}

	.sw_page_list .item_sw {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		background: #fff;
	}

	.sw_page_list .item_sw.on {
		color: #fff;
		background: #000;
	}

	.sw_page_list .item_sw:nth-child(1) {
		border-radius: 8rpx 0 0 8rpx;
	}

	.sw_page_list .item_sw:nth-child(2) {
		border-radius: 0 8rpx 8rpx 0;
	}

	.ex_card_box {
		position: relative;
		padding: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 16rpx;
		border: 2rpx solid #EEEEEE;
	}

	.ex_card_box .card_img {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 252rpx;
		height: 200rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		background: #fff;
	}

	.ex_card_box .card_img .img_size {
		position: relative;
	}

	.card_checkbox_pos {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}
</style>